import WMap from 'http://139.9.35.40/wmap/wmap.es.js'

const speedInput1 = document.getElementById('speed1')
const distanceInput1 = document.getElementById('distance1')

const speedInput2 = document.getElementById('speed2')
const distanceInput2 = document.getElementById('distance2')

const startButton1 = document.getElementById('start1')
const startButton2 = document.getElementById('start2')
const pauseButton1 = document.getElementById('pause1')
const resumeButton1 = document.getElementById('resume1')
const stopButton1 = document.getElementById('stop1')
const angleFixed = document.getElementById('angleFixed')

const pauseButton2 = document.getElementById('pause2')
const resumeButton2 = document.getElementById('resume2')
const stopButton2 = document.getElementById('stop2')
const startButton3 = document.getElementById('start3')
const map = new WMap.Map('map', {
	center: [116.48538303047181, 39.99969219049072],
	zoom: 16,
	minZoom: 3,
	maxZoom: 18
})

const marker1 = new WMap.Marker({
	map,
	position: [116.478935, 39.997761],
	icon: 'https://webapi.amap.com/images/car.png',
	offset: [-26, -13],
	angle: -90
})

marker1.on('click', e => {
	console.log(e.target)
})

const marker2 = new WMap.Marker({
	map,
	position: [116.281149, 39.798184],
	icon: 'https://webapi.amap.com/images/car.png',
	offset: [-26, -13],
	angle: -90
})

const marker3 = new WMap.Marker({
	map,
	position: [116.281149, 39.798184],
	icon: 'https://webapi.amap.com/images/car.png',
	offset: [-26, -13],
	angle: -90
})

const lineArr1 = [[116.478935, 39.997761]];
// 随机生成10个坐标[113~119, 36~42]
const minRange = 0
const maxRange = 3
for (let i =0; i < 10; i++) {
	const lng = Number((GetRandomNum(minRange, maxRange)+Math.random() + 116).toFixed(6));
	const lat = Number((GetRandomNum(minRange, maxRange)+Math.random() + 39).toFixed(6));
	lineArr1.push([lng, lat]);
}
function GetRandomNum(Min, Max)
{   
	let Range = Max - Min;   
	let Rand = Math.random();   
	return(Min + Math.round(Rand * Range));   
}
// const lineArr1 = [
// 	[116.478935, 39.997761], // 1
// 	[116.478939, 39.997825], // 2
// 	[116.478912, 39.998549], // 3
// 	[116.478912, 39.998549],
// 	[116.478998, 39.998555], // 4
// 	[116.478998, 39.998555],
// 	[116.479282, 39.99856], // 5
// 	[116.479658, 39.998528], // 6
// 	[116.480151, 39.998453], // 7
// 	[116.480784, 39.998302], // 8
// 	[116.480784, 39.998302],
// 	[116.481149, 39.998184], // 9
// 	[116.481573, 39.997997], // 10
// 	[116.481863, 39.997846], // 11
// 	[116.482072, 39.997718], // 12
// 	[116.482362, 39.997718], // 13
// 	[116.483633, 39.998935], // 14
// 	[116.48367, 39.998968], // 15
// 	[116.484648, 39.999861], // 16
// 	[116.4889679286499, 40.003822062536884], // 17
// 	[116.49177741676331, 40.00160192330932], // 18
// 	[116.48720693260194, 39.9987695105896] // 19
// ]

const lineArr2 = [
	[116.281149, 39.798184], // 9
	[116.281573, 39.797997], // 10
	[116.281863, 39.797846], // 11
	[116.282072, 39.797718], // 12
	[116.282362, 39.797718], // 13
	[116.283633, 39.798935], // 14
	[116.28367, 39.798968], // 15
	[116.284648, 39.799861], // 16
	[116.2889679286499, 40.003822062536884], // 17
	[116.29177741676331, 40.00160192330932], // 18
	[116.28720693260194, 39.9987695105896] // 19
]

const lineArr3 = [
  [103.378456, 30.370259],
	[103.378478, 30.370267],
	[103.378691, 30.370385],
	[103.378867, 30.370467],
	[103.379042, 30.370517],
	[103.379156, 30.370544],
	[103.379407, 30.370662],
	[103.379606, 30.370721],
	[103.380017, 30.370785],
	[103.381845, 30.371137],
	[103.382043, 30.371175],
	[103.38247, 30.371256],
	[103.383019, 30.371388],
	[103.383437, 30.371514],
	[103.384397, 30.371879],
	[103.385586, 30.372397],
	[103.386265, 30.37267],
	[103.387201, 30.373052],
	[103.38785, 30.373372],
	[103.388169, 30.373552],
	[103.388169, 30.373552],
	[103.388847, 30.373829],
	[103.389496, 30.374035],
	[103.39009, 30.37418],
	[103.390479, 30.374238],
	[103.390874, 30.374288],
	[103.391286, 30.374307],
	[103.392003, 30.374269],
	[103.393024, 30.374187],
	[103.394335, 30.374109],
	[103.395173, 30.37406],
	[103.395975, 30.373903],
	[103.396927, 30.373657],
	[103.397293, 30.373631],
	[103.397469, 30.373644],
	[103.397705, 30.373673],
	[103.398223, 30.373922],
	[103.399801, 30.374875],
	[103.400991, 30.375625],
	[103.403118, 30.376967],
	[103.40408, 30.377843],
	[103.404324, 30.378087],
	[103.404705, 30.378434],
	[103.405033, 30.378699],
	[103.405323, 30.378877],
	[103.406718, 30.37965],
	[103.406779, 30.379688],
	[103.407024, 30.379833],
	[103.408984, 30.380896],
	[103.409213, 30.381018],
	[103.409877, 30.381481],
	[103.410442, 30.381692],
	[103.410808, 30.381778],
	[103.410945, 30.381797],
	[103.411449, 30.381805],
	[103.411861, 30.381778],
	[103.41257, 30.381771],
	[103.413074, 30.381745],
	[103.413554, 30.381788],
	[103.413913, 30.381896],
	[103.414447, 30.382245],
	[103.414615, 30.382358],
	[103.414966, 30.382791],
	[103.415309, 30.383147],
	[103.415568, 30.383287],
	[103.416172, 30.383475],
	[103.416897, 30.383612],
	[103.417484, 30.38383],
	[103.417683, 30.383951],
	[103.418057, 30.384355],
	[103.418316, 30.385063],
	[103.418598, 30.385631],
	[103.418881, 30.386382],
	[103.419049, 30.386756],
	[103.419164, 30.386935],
	[103.419164, 30.386935],
	[103.420469, 30.388523],
	[103.421339, 30.389654],
	[103.421774, 30.390434],
	[103.421927, 30.390682],
	[103.422659, 30.39186],
	[103.422964, 30.392176],
	[103.423301, 30.39251],
	[103.424384, 30.393223],
	[103.425148, 30.393578],
	[103.426347, 30.394185],
	[103.428569, 30.396277],
	[103.429684, 30.398014],
	[103.430845, 30.399358],
	[103.430952, 30.3996],
	[103.431249, 30.400087],
	[103.431769, 30.400965],
	[103.431822, 30.401108],
	[103.432051, 30.401677],
	[103.432754, 30.403462],
	[103.432869, 30.403676],
	[103.432998, 30.40386],
	[103.433204, 30.404018],
	[103.433572, 30.404175],
	[103.433625, 30.404182],
	[103.433915, 30.404235],
	[103.434412, 30.40423],
	[103.434953, 30.404177],
	[103.436153, 30.404223],
	[103.43694, 30.404332],
	[103.437284, 30.404402],
	[103.437399, 30.404427],
	[103.437283, 30.405032],
	[103.437062, 30.406301],
	[103.437009, 30.406606],
	[103.436871, 30.406678],
	[103.436237, 30.406605],
	[103.43325, 30.406192],
	[103.432625, 30.4061],
	[103.432181, 30.406031],
	[103.431998, 30.406008],
	[103.431013, 30.40592],
	[103.430638, 30.405882],
	[103.430638, 30.405882],
	[103.429523, 30.405708],
	[103.428568, 30.405556],
	[103.427851, 30.405454],
	[103.426881, 30.405299],
	[103.425972, 30.405138],
	[103.425385, 30.405011],
	[103.425385, 30.405011],
	[103.425255, 30.405028],
	[103.424995, 30.405032],
	[103.424812, 30.405066],
	[103.424667, 30.405114],
	[103.424545, 30.405178],
	[103.424445, 30.405239],
	[103.424362, 30.405319],
	[103.424285, 30.40541],
	[103.424224, 30.4055],
	[103.424171, 30.405597],
	[103.424133, 30.405755],
	[103.424117, 30.405847],
	[103.424125, 30.406089],
	[103.424178, 30.406345],
	[103.424163, 30.406454],
	[103.42443, 30.407117],
	[103.424514, 30.407354],
	[103.424842, 30.408229],
	[103.425247, 30.409408],
	[103.425598, 30.410578],
	[103.425896, 30.41169],
	[103.426133, 30.412652],
	[103.426285, 30.413279],
	[103.426407, 30.413811],
	[103.426537, 30.414437],
	[103.426819, 30.416285],
	[103.426865, 30.416598],
	[103.426949, 30.417355],
	[103.427056, 30.418494],
	[103.427124, 30.419241],
	[103.427353, 30.423643],
	[103.427934, 30.434625],
	[103.428102, 30.437915],
	[103.428109, 30.439226],
	[103.428101, 30.439928],
	[103.428063, 30.440735],
	[103.428002, 30.441645],
	[103.427864, 30.442905],
	[103.427697, 30.444036],
	[103.427399, 30.445606],
	[103.427391, 30.445667],
	[103.427108, 30.446806],
	[103.42675, 30.448098],
	[103.426383, 30.449255],
	[103.425413, 30.45186],
	[103.425145, 30.452646],
	[103.424916, 30.453381],
	[103.424764, 30.453925],
	[103.424642, 30.454461],
	[103.424405, 30.455541],
	[103.424291, 30.456213],
	[103.424237, 30.456587],
	[103.42358, 30.460775],
	[103.423443, 30.461668],
	[103.423374, 30.462459],
	[103.423336, 30.462942],
	[103.423374, 30.463488],
	[103.42342, 30.464076],
	[103.423489, 30.46453],
	[103.42358, 30.464934],
	[103.423702, 30.465373],
	[103.423901, 30.465941],
	[103.424114, 30.466436],
	[103.424297, 30.466804],
	[103.424542, 30.467232],
	[103.42474, 30.467573],
	[103.425252, 30.468366],
	[103.42881, 30.473832],
	[103.429177, 30.474422],
	[103.430154, 30.476124],
	[103.430796, 30.477346],
	[103.431071, 30.477929],
	[103.431384, 30.478562],
	[103.431765, 30.479437],
	[103.433613, 30.483441],
	[103.434431, 30.48519],
	[103.434676, 30.485691],
	[103.434943, 30.48619],
	[103.435279, 30.486736],
	[103.435554, 30.487119],
	[103.435875, 30.487528],
	[103.436165, 30.487866],
	[103.436463, 30.488171],
	[103.436784, 30.488475],
	[103.437105, 30.488759],
	[103.437486, 30.489066],
	[103.437869, 30.489338],
	[103.438197, 30.489559],
	[103.438526, 30.489757],
]

const polyline1 = new WMap.Polyline({
	map,
	path: lineArr1,
	showDir: true, // 是否显示箭头
	strokeColor: '#28F', // 线颜色 历史双轨迹线必须
	activeStrokeColor: 'green', // 活跃状态时的线条颜色 历史双轨迹线必须
	strokeWeight: 6, // 线宽
	segmentLength: 2, // 最小子路径长度
	units: 'meters' // 最小子路径单位
})

// const polyline2 = new WMap.Polyline({
// 	map,
// 	path: lineArr2,
// 	showDir: true, // 是否显示箭头
// 	strokeColor: '#28F', // 线颜色 历史单轨迹线必须
// 	strokeWeight: 6 // 线宽
// })

// 实时轨迹线
const polyline3 = new WMap.Polyline({
	map,
	activeStrokeColor: 'green', // 线颜色 历史单轨迹线必须
	strokeWeight: 6 // 线宽
})

marker1.on('moving', function (e) {
	e.target.angleFixed = angleFixed.checked
	polyline1.setPath(e.passedPath)
	distanceInput1 && (distanceInput1.value = marker1.getRatio() * 10)
})

marker2.on('moving', function (e) {
	distanceInput2 && (distanceInput2.value = marker2.getRatio() * 10)
})

function startAnimation1() {
	marker1.moveAlong(lineArr1, angleFixed.checked, Number(speedInput1 ? speedInput1.value : 100)) // 历史轨迹
}

function startAnimation2() {
	marker2.moveAlong(lineArr2, Number(speedInput2 ? speedInput2.value : 100)) // 历史轨迹
}

speedInput1 &&
	(speedInput1.onchange = e => {
		marker1.updateMoveSpeed(e.target.value)
	})

speedInput2 &&
	(speedInput2.onchange = e => {
		marker2.updateMoveSpeed(e.target.value)
	})

distanceInput1 &&
	(distanceInput1.onchange = e => {
		console.log(e.target.value / 1000)
		marker1.updateMoveDistance(e.target.value / 1000)
		polyline1.updatePassedPath(marker1.getMoveIndex())
	})

distanceInput2 &&
	(distanceInput2.onchange = e => {
		marker2.updateMoveDistance(e.target.value / 1000)
	})

function pauseAnimation1() {
	marker1.pauseMove()
}

function resumeAnimation1() {
	marker1.resumeMove()
}

function stopAnimation1() {
	startButton1.textContent = 'Start Animation'
	marker1.stopMove()
}
function pauseAnimation2() {
	marker2.pauseMove()
}

function resumeAnimation2() {
	marker2.resumeMove()
}

function stopAnimation2() {
	startButton2.textContent = 'Start Animation'
	marker2.stopMove()
}
// 开始动画
startButton1.addEventListener('click', function () {
	if (polyline1.getVirtuaPath().length) {
		map.panTo(lineArr1[0], { duration: 0 })
		startAnimation1()
	} else {
		console.warn('虚拟轨迹正在初始化中');
	}
})
startButton2.addEventListener('click', function () {
	map.panTo(lineArr2[0], { duration: 0 })
	startAnimation2()
})
startButton3.addEventListener('click', () => {
  map.panTo(lineArr3[0], { duration: 0 })
  lineArr3.map((item, i) => {
    setTimeout(() => {
      marker3.move(polyline3, item)
      map.panTo(item, { duration: 0 })
    }, i * 1000)
  })
})
// 暂停动画
pauseButton1.addEventListener('click', function () {
	pauseAnimation1()
})
// 继续动画
resumeButton1.addEventListener('click', function () {
	resumeAnimation1()
})
// 停止动画
stopButton1.addEventListener('click', function () {
	stopAnimation1()
})

// 暂停动画
pauseButton2.addEventListener('click', function () {
	pauseAnimation2()
})
// 继续动画
resumeButton2.addEventListener('click', function () {
	resumeAnimation2()
})
// 停止动画
stopButton2.addEventListener('click', function () {
	stopAnimation2()
})
